<template>
  <view >
    <up-radio-group v-model="radiovalue" placement="column" @change="handleRadioGroupChange">
			<view :class="direction === 'horizontal' ? 'ycy-car-card-horizontal' : 'ycy-car-card-vertical'">
				<view
				  :class="direction === 'horizontal' ? 'ycy-car-card-horizontal-item' : (showRadio ? 'ycy-car-card-vertical-item-radio' : 'ycy-car-card-vertical-item')"
				  v-for="(item, index) in list"
				  :key="item.id"
				  @click.stop.self="handleItemClick(item, index)">
				  <up-radio v-if="showRadio" :customStyle="{marginRight: '8px'}" activeColor="#125796" :name="index" />
				  <car-card-item class="car-card-item" :showBtn="!showRadio" :carItem="item" :carType="item.checkStatus ? 'unexpire' : item.id === '-1' ? 'add' : 'expire'" />
				</view>
			</view>
    </up-radio-group>
  </view>
</template>

<script setup>
  import carCardItem from './car-card-item.vue';
  import { ref, onMounted } from 'vue';
  import API from '@/api';
  // import { onInit } from '@dcloudio/uni-app';

  const props = defineProps({
    itemCilck: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'horizontal' //horizontal 或 vertical
    },
    searchParam: {
      type: Object,
      default: () => {}
    },
    showAdd: {
      type: Boolean,
      default: true
    },
		showRadio: {
			type: Boolean,
			default: false
		}
  });

  // onMounted(async () => {

  // })

  uni.$on('updateCarList', () => {
    // console.log('updateCarList ----------------------------------------------------');
    getCarList();
  });

	const emits = defineEmits(['onChoose'])
	const radiovalue = ref(0);
  const list = ref([]);
  const addItem = { id: '-1' };
  const mockCarList = [
    {
      id: '0',
      licensePlate: '渝ARG681',
      carType: '小型汽车',
      owner: '张三',
      useNature: '非营运',
      brandModel: '奥迪',
      identificationCode: 'LGAX5D64791002317',
      engineCode: '91000300',
      registerTime: '2019-08-31',
      peopleNum: '5',
      casualtyAccident: 1,
      lastCheckTime: '2023-07-05',
    },
    {
      id: '1',
      licensePlate: '渝BQC792',
      carType: '小型汽车',
      owner: '李四',
      useNature: '非营运',
      brandModel: '凯迪拉克',
      identificationCode: 'LGAX5D64791002317',
      engineCode: '91000300',
      registerTime: '2017-08-31',
      peopleNum: '5',
      casualtyAccident: 1,
      lastCheckTime: '2021-07-05',
    },
    {
      id: '2',
      licensePlate: '渝CBK688',
      carType: '小型汽车',
      owner: '王五',
      useNature: '非营运',
      brandModel: '奥迪',
      identificationCode: 'LGAX5D64791002317',
      engineCode: '91000300',
      registerTime: '2017-08-31',
      peopleNum: '5',
      casualtyAccident: 1,
      lastCheckTime: '2023-07-05',
    }
  ];
	
	const handleRadioGroupChange = index => {
		emits('onChoose', list.value[index])
	}

  const handleItemClick = (item, index) => {
		if (props.showRadio) {
			radiovalue.value = index
			return;
		}
    if (!props.itemCilck) return;
    uni.navigateTo({
      url: `/pages/mine/pages/car/car?carId=${item.id}&fromPage=carCard`
    });
  };

  const getCarList = async () => {
    const res = await API.car.getAll(props.searchParam);
    const nonZeroItems = res.data.filter(item => item.id !== '0');
    const zeroItemId = res.data.find(item => item.id === '0');
    list.value = nonZeroItems.concat(zeroItemId || [], props.showAdd ? [addItem] : []);
		emits('onChoose', list.value[0])
  };

  const addMockCar = () => {
    mockCarList.forEach(async mockCar => {
      const res = await API.car.detail(mockCar.id);
      if (!res.data) {
        await API.car.add(mockCar);
        getCarList();
      }
    })
  };

  addMockCar();
  getCarList();
  // console.log('list setup', list.value);
</script>

<style lang="scss" scoped>
  .ycy-car-card-horizontal {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* 启用snap点滚动 */
    -webkit-overflow-scrolling: touch;
    /* 在iOS上提供流畅滚动 */
    white-space: nowrap;
    /* 阻止文本换行 */
    gap: 6px;

    &-item {
      overflow: hidden;
      width: calc(100% - 32px);
      flex-shrink: 0;
      /* 确保每个item保持原始宽度 */
      scroll-snap-align: start;
      /* snap点对齐开始位置 */
      padding: 6px;
    }
  }
  .ycy-car-card-vertical {
    width: 100%;
    &-item {
      padding: 6px;
    }
		
		&-item-radio {
			@include flex-row(space-between, center);
		  padding: 6px;
		}
		
		.car-card-item {
			flex: 1;
		}
  }
</style>
